<template>
	<view class="container">
		<Default
			:showflag="showflag"
			:type='4'
		></Default>
		<view class="address" v-if="addressData" v-for="(item, index) in addressData" :key="item.id">
			<view class="name">
				<view>{{item.receive_name}}</view>
				<view class="defalutCheck" @click="setDefault(item.id)">
					<image v-if="item.is_default" src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" mode=""></image>
					<image v-if="!item.is_default" src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" mode=""></image>
					<text v-if="item.is_default">默认地址</text>
					<text v-if="!item.is_default">设为默认</text>
				</view>
			</view>
			<view class="phone">
				{{ item.receive_tel }}
			</view>
			<view class="home">
				{{ item.area_info }} {{ item.address }}
			</view>
			<view class="btn">
				<view @click="goEdit(item.id)">
					<image src="https://community.chuangxiangdianli.com/images/me/address_edit.png" mode=""></image>
					编辑
				</view>
				<view @click="delAddress(item.id)">
					<image src="https://community.chuangxiangdianli.com/images/me/address_delete.png" mode=""></image>
					删除
				</view>
			</view>
		</view>
		<!--  新增地址 -->
		<view class="addBtn" @click="goAdd">
			+新增地址
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				showflag: false, // 缺省页显示标识
				addressData: [], // 用户收货地址数据
			}
		},
		onShow() {
			// 获取收获地址
			this.getAddress()
		},
		methods: {
			// 获取用户地址
			getAddress() {
				var that = this
				this.$http.post({
					url: 'Mini/address/getAddress',
				}).then(res => {
					if (res.status) {
						that.addressData = res.data
						if (that.addressData.length > 0) {
							that.showflag = false
						} else {
							that.showflag = true
						}
						console.log('showflag', that.showflag)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			// 跳转新增地址页面
			goAdd() {
				uni.navigateTo({
					url: '/me/address/addAddress'
				})
			},
			//  跳转编辑页面
			goEdit(id) {
				uni.navigateTo({
					url: '/me/address/addAddress?id=' + id
				})
			},
			//  将地址设置为默认
			setDefault(id) {
				var that = this
				this.$http.post({
					url: 'Mini/address/set',
					data: {
						address_id: id
					}
				}).then(res => {
					if (res.status) {
						uni.showToast({
							title: '设置成功！',
							icon: 'none'
						})
						that.getAddress()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			// 删除地址
			delAddress(id) {
				var that = this
				this.$http.post({
					url: 'Mini/address/del',
					data: {
						token: that.token,
						address_id: id
					}
				}).then(res => {
					uni.showToast({
						title: '删除成功！',
						icon: 'none'
					})
					that.getAddress()
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100%;
		width: 100%;
		background: #F7F6F9;
		padding-bottom: 180rpx;
		box-sizing: border-box;
	}  
	.address{
		width: 100%;
		padding: 21rpx 30rpx 15rpx;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 12rpx;
		.name{
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
			
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			.defalutCheck{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 164rpx;
				
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #34C39E;
				&>image{
					display: block;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.phone{
			margin: 20rpx 0;
		}
		.btn{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			width: 100%;
			height: 60rpx;
			border-top: 2rpx solid #F7F6F9;
			&>view{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-left: 20rpx;
				&>image{
					display: block;
					height:28rpx;
					width: 28rpx;
					margin: 0 10rpx;
				}
			}
		}
	}
	.addBtn{
		position: fixed;
		left: 30rpx;
		bottom: 10rpx;
		width: calc(100vw - 60rpx);
		height: 90rpx;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
